<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/common::header">
    <title>角色管理</title>
</head>
<body>
<!--导航栏-->
<div class="x-nav">
                  <span class="layui-breadcrumb">
                    <a href="">首页</a>
                    <a href="">系统管理</a>
                    <a><cite>角色管理</cite></a>
                  </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>

<!-----查询条件---->
<blockquote shiro:hasPermission="role_list" class="layui-elem-quote news_search">
    <form class="layui-form" action="">
        <div class="layui-inline">
            <label class="layui-form-label">角色名：</label>
            <div class="layui-input-inline">
                <input type="text" value="" placeholder="请输入角色名" id="roleName"
                       class="layui-input search_input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">账号状态：</label>
            <div class="layui-input-inline">
                <select id="status">
                    <option value="">请选择</option>
                    <option value="0">已启用</option>
                    <option value="1">未启用</option>
                </select>
            </div>
        </div>
        <div class="layui-input-inline">
            <a class="layui-btn search_btn" onclick="rolereloding()">查询</a>
        </div>
    </form>
</blockquote>

<!-- 数据表格 -->
<table shiro:hasPermission="role_list" id="role" lay-filter="roleFilter"></table>

<!--行工具栏 DOM-->
<script type="text/html" id="roleBar">
    {{#  if(d.status==0){ }}
    <a shiro:hasPermission="role_startstop" class="layui-btn layui-bg-blue layui-btn-xs" lay-event="roleState">停用</a>
    {{#  } else { }}
    <a shiro:hasPermission="role_startstop" class="layui-btn layui-bg-blue layui-btn-xs" lay-event="roleState">启用</a>
    {{#  } }}
    <a shiro:hasPermission="role_update" class="layui-btn layui-btn-xs" lay-event="empEdit">编辑</a>
    <a shiro:hasPermission="role_delete" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="roleDel">删除</a>
</script>

<!--添加角色 DOM-->
<div id="roleDom" style="display: none;">
    <form id="addRole" method="post" class="layui-form" action="">
        <!--占位-->
        <div class="layui-form-item">
            <div class="layui-input-inline" style="width:170px;">
                <input type="hidden" name="id" id="id" value=""/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名<span class="x-red">*</span>:</label>
            <div class="layui-input-inline" style="width:170px;">
                <input type="text" id="rName" name="roleName" lay-verify="required" style="width: 160px;"
                       placeholder="角色名称"
                       autocomplete="off"
                       class="layui-input">
                <span id="tips" style="color: red;"></span>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">权限:</label>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"
                    onclick="checkAll('#LAY-auth-tree-convert-index')">全选
            </button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"
                    onclick="uncheckAll('#LAY-auth-tree-convert-index')">全不选
            </button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"
                    onclick="showAll('#LAY-auth-tree-convert-index')">全部展开
            </button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-primary"
                    onclick="closeAll('#LAY-auth-tree-convert-index')">全部隐藏
            </button>
            <div class="layui-input-block">
                <div id="LAY-auth-tree-convert-index"></div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述<span class="x-red"></span>:</label>
            <div class="layui-input-block">
                <textarea id="roleDescription" name="roleDescription" style="width: 400px;" placeholder="描述信息"
                          class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="submit" lay-submit lay-filter="LAY-auth-tree-submit">提交</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>

            </div>
        </div>
    </form>
</div>

<!--头部工具栏-->
<script type="text/html" id="roleTool">
    <button class="layui-btn" lay-event="showAddRole"><i class="layui-icon layui-icon-add-1"></i>添加角色</button>
    </button>
</script>

<!--javascript 开始-->
<script th:inline="none">

    /*加载authtree组件*/
    layui.config({
        base: '../lib/extends/'
    }).extend({
        authtree: 'authtree'
    });

    /*刷新表格*/
    function rolereloding() {
        layui.use('table', function () {
            var table = layui.table;
            table.reload('role', {
                height: 'full-150',
                where: {
                    roleName: $("#roleName").val(),
                    status: $("#status").val()
                }
            });
        });
    }

    //判断表单是否提交
    var isSubmit = false;
    //用户名框失去焦点时触发校验
    $("#rName").blur(function () {
        //ajax同步请求
        $.ajax({
            type: "post",
            url: "/dangxia/role/isExistRoleName",
            cache:false,
            data:{
                roleName: $("#rName").val(),
                id:$("#id").val()
            },
            async:false,
            dataType:"json",
            success: function (data) {
                if (data.code == 0) {
                    $("#tips").html("角色名已存在");
                    layer.msg("角色名已存在");
                    isSubmit = false;
                } else {
                    $("#tips").html("");
                    isSubmit = true;
                }
            }

        });
    })

    /*layui实例*/
    layui.use(['table', 'form'], function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#role'
            , height: 'full-150'
            , toolbar: '#roleTool'
            ,skin: 'row' //设置皮肤
            , even: true    //偶数行
            ,autoSort: false //禁用前端自动排序。
            , url: '/dangxia/role/getRoleAll' //数据接口
            , defaultToolbar: []  //默认工具
            , page: true //开启分页
            , limits: [10, 20, 30]
            , limit: 10
            , cols: [[ //表头
                {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                , {field: 'roleName', title: '角色名'}
                , {field: 'roleDescription', title: '描述'}
                , {
                    field: 'status', title: '角色状态',
                    templet: function (ste) {
                        if (ste.status == 0) {
                            return "<span style='height:28px;line-height: 28px' class='layui-btn layui-btn-normal layui-btn-mini'>已启用</span>"
                        } else {
                            return "<span style='height:28px; line-height: 28px' class='layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled'>未启用</span>"
                        }
                    }
                }
                , {field: 'createtime', title: '创建日期' , sort: true}
                , {field: 'revamptime', title: '修改日期' , sort: true}
                , {field: 'right', title: '操作', toolbar: '#roleBar'}
            ]]
        });

        /*行工具监听*/
        table.on('tool(roleFilter)', function (obj) {
            /*行工具监听分流*/
            switch (obj.event) {

                //停用启用事件监听
                case "roleState":
                    var statu = 0;
                    if (obj.data.status == 0) {
                        statu = 1;
                    }
                    $.post("/dangxia/role/updateRoleStatus", {
                        id: obj.data.id,
                        status: statu
                    }, function (data) {
                        if (data.code == 0) {
                            /!*刷新*!/
                            rolereloding();
                        }
                    });
                    break;

                //编辑按钮事件监听
                case "empEdit":
                    //重置表单
                    $("#addRole")[0].reset();
                    //清空提示
                    $("#tips").html("");
                    //提交到的路径
                    var url = "/dangxia/role/updateRoleById";
                    $("#addRole").attr("action", url);
                    //编辑面板
                    layer.open({
                        type: 1,
                        title: "编辑角色",
                        area: ['600px', '700px'],
                        content: $('#roleDom')
                    });
                    //赋初始值
                    $("#id").val(obj.data.id);
                    $("#rName").val(obj.data.roleName);
                    $("#roleDescription").val(obj.data.roleDescription);
                    //获得已拥有的权限
                    $.post("/dangxia/permission/getRolePermissionById", {
                        id: obj.data.id
                    }, function (data) {
                        //用来存储所有的权限
                        var selIds = [];
                        //遍历所有的权限并存入数组
                        for (var i = 0; i < data.data.length; i++) {
                            selIds.push(data.data[i].id);
                        }
                        //调用封装的方法
                        showTree(selIds, "修改成功");
                    });
                    break;

                //删除按钮事件监听
                case "roleDel":
                    //提示信息
                    var dialog = layer.confirm('真的删除行么?删除之后将无法恢复！！', function (index) {
                        //发送删除请求
                        $.post("/dangxia/role/deleteRoleById", {
                            id: obj.data.id
                        }, function (data) {
                            //判断是否成功
                            if (data.code == 0) {
                                /*刷新*/
                                rolereloding();
                                layer.close(dialog);
                            }
                        })
                    });
                    break;
                default:
                    console.log("呵呵")
                    break;
            }


        });

        //监听排序事件
        table.on('sort(roleFilter)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('role', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    ,order: obj.type //排序方式
                }
            });
        });

        /*头部工具栏监听*/
        table.on('toolbar(roleFilter)', function (obj) {
            switch (obj.event) {
                /*显示添加面板*/
                case 'showAddRole':
                    //重置表单
                    $("#addRole")[0].reset();
                    //清空提示
                    $("#tips").html("");
                    //清空id
                    $("#id").val("");
                    //提交到的路径
                    var url = "/dangxia/role/addRole";
                    //给表单添加action属性
                    $("#addRole").attr("action", url);
                    //打开添加角色弹出层
                    layer.open({
                        type: 1,
                        title: "添加角色",
                        area: ['600px', '700px'],
                        content: $('#roleDom')
                    });
                    //不清楚为什么要写两次
                    $("#id").val("");
                    showTree([], "添加成功");
                    break;
            }
            ;
        });
    });

    // 全选按钮
    function checkAll(dst) {
        layui.use(['jquery', 'layer', 'authtree'], function () {
            var layer = layui.layer;
            var authtree = layui.authtree;
            authtree.checkAll(dst);
        });
    }

    // 全不选样例
    function uncheckAll(dst) {
        layui.use(['jquery', 'layer', 'authtree'], function () {
            var layer = layui.layer;
            var authtree = layui.authtree;
            authtree.uncheckAll(dst);
        });
    }

    // 显示全部
    function showAll(dst) {
        layui.use(['jquery', 'layer', 'authtree'], function () {
            var layer = layui.layer;
            var authtree = layui.authtree;
            authtree.showAll(dst);
        });
    }

    // 隐藏全部
    function closeAll(dst) {
        layui.use(['jquery', 'layer', 'authtree'], function () {
            var layer = layui.layer;
            var authtree = layui.authtree;
            authtree.closeAll(dst);
        });
    }

    //显示权限树
    function showTree(permiId, msg) {
        layui.use(['layer', 'authtree', 'jquery', 'form', 'code'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var authtree = layui.authtree;
            var form = layui.form;
            /*获得所有的权限*/
            $.ajax({
                url: "/dangxia/permission/getPermissionAll",
                data: {status: 0},
                dataType: 'json',
                success: function (res) {
                    $('#LAY-auth-tree-convert-code').text(JSON.stringify(res.data, null, 2));
                    // 支持自定义递归字段、数组权限判断等
                    // 深坑注意：如果API返回的数据是字符串，那么 startPid 的数据类型也需要是字符串
                    var trees = authtree.listConvert(res.data, {
                        primaryKey: 'id'
                        , startPid: 0
                        , parentKey: 'pid'
                        , nameKey: 'title'
                        , valueKey: 'id',
                        checkedKey: permiId
                    });
                    // 如果页面中多个树共存，需要注意 layfilter 需要不一样
                    authtree.render('#LAY-auth-tree-convert-index', trees, {
                        inputname: 'ids',
                        //layfilter: 'lay-check-convert-auth',
                        // openall: true,
                        autowidth: true,
                    });

                    //定义表单是否提交
                    //防止网速慢 重复提交表单
                    var fromIsSubmit = true;

                    //监听提交请求
                    form.on('submit(LAY-auth-tree-submit)', function (obj) {

                        //表单是否提交
                        if (fromIsSubmit != true){
                            return false;
                        }
                        //提交状态
                        fromIsSubmit = false;
                        //权限至少选择一个
                        if ($("input[type='checkbox']:checked").length == 0) {
                            layer.msg("至少选中一项");
                            return false;
                        }
                        $("#rName").blur();
                        //不为真 不提交
                        if (!isSubmit) {
                            layer.msg("角色名已存在");
                            return false
                        }
                        //以ajax方式提交表单
                        $("#addRole").ajaxForm(function (data) {
                            if (data.code == 0) {

                                //提交状态
                                fromIsSubmit = true;

                                //提示信息
                                layer.msg(msg);
                                //清空表单
                                $("#addRole")[0].reset();
                                //刷新页面
                                window.location.replace(location.href);
                                layer.closeAll();
                            }
                        });
                    });
                }
            })
        });
    }
</script>
</body>
</html>